<template>
  <div anouce-add-component class="article-editor">
    <h3>发布公告</h3>
    <div class="fields clearfix">
        <div class="image">
            <image-uploader ref="uploader" tip="上传封面图片（最大2M)" class="x-uploader" @on-success="f=>pic=f.id" @on-failed="onUploadFailed"></image-uploader>            
        </div>
        <div class="info">
            <div class="item"><i-input type="text" v-model="title" placeholder="30字以内"><span slot="prepend">标题：</span></i-input></div>
            <div class="item"><i-input type="text" v-model="source" placeholder="30字以内"><span slot="prepend">来源：</span></i-input></div>
        </div>
    </div>
    <div class="content">
        <rich-editor v-model="content" ></rich-editor>
    </div>
    <div class="op">
        <i-button type="primary" size="small" @click="$router.go(-1)">取消</i-button>
        <i-button type="primary" size="small" @click="onReplyClick" class="button-r">发布</i-button>
    </div>
  </div>
</template>

<script>
import api from '../../services/anouce.api'
import moment from 'moment'
import cookie from '../../libs/cookie'
import Quill from 'quill'
import richEditor from '../common/rich-editor.component'
import imageUploader from '../common/image-uploader.component'

export default {
    components:{
        richEditor,
        imageUploader
    },
    data(){
        return {
            title:"",
            pic:0,
            source:"",
            content:"",
            token:""
        }
    },
    methods:{
        onReplyClick(){
            const msg = this.$Message.loading({
                content:'loading...',
                duration:0
            });

            let token = cookie.get("token");
            api.addAnouce(this.title,this.pic,this.source,this.authorName, this.content).then(data=>{
                setTimeout(msg,0);
                if(data.stat == 'ok'){
                    alert('添加成功');
                    this.$router.push('/anouce/list');
                }
                else{
                    this.$message.error(`发生错误,错误码：${data.stat}`);
                }
            }).catch(err=>{
                setTimeout(msg,0);
                this.$Message.error(`发生异常：${err}`);
            })
        },
        onUploadFailed (r) {
                this.$Message.error("错误码："+ r.stat + (r.error ? "\r\n错误信息："+r.error : ''));
        }
    }
  }

</script>

<style>


.article-editor .quill-editor .ql-container,
.article-editor .quill-editor .ql-container .ql-editor {
    height: 300px;
    padding-bottom: 1px;
}
</style>


<style scoped>
  [anouce-add-component] {
      background: #eee;
  }

  .article-editor > div{
      margin-left: 10px;
  }

.article-editor .fields .info .item{
    margin-top:10px;
}

.article-editor .fields .info .item .source{
    margin: 0px;
    padding: 0px;
    width: 300px;
    display: inline-block;
}

.article-editor .fields .info .item .author{
    margin: 0px;
    padding: 0px;
    width: 300px;
    display: inline-block;
}

.article-editor .fields .image .x-uploader{
    width: 300px;
    height: 200px;
}

.article-editor .info .item .content{
    margin-top: 10px;
}

.article-editor .content{
    width: 800px;
    background: #fff;
    clear: both;
}

.article-editor .op{
    width: 800px;
    height: 80px;
    padding: 10px;
}
  .article-editor .fields .image{
      float: left;
      width: 300px;
      height: 200px;
  }
  .article-editor .fields .info{
      float: left;
  }
</style>